<template>
  <div id="dialog">
    <el-dialog
      :visible.sync="_visible"
      :width="width"
      :before-close="handleClose">
      <base-card :title="title">
        <slot>
        </slot>
      </base-card>
      <span slot="footer" class="dialog-footer">
        <slot name="footer">
          <el-button @click="_visible = false">取 消</el-button>
          <el-button type="primary" @click="_visible = false">确 定</el-button>
        </slot>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import BaseCard from '../../components/BaseCard/BaseCard'
  export default {
    name: 'MyDialog',
    props: {
      title: {
        type: String
      },
      visible: {
        type: Boolean,
        default: false
      },
      handleClose: {
        type: Function
      },
      width: {
        type: String,
        default: '30%'
      }
    },
    components: {
      BaseCard
    },
    computed: {
      _visible: {
        set(newVal) {
          this.$emit('update:visible', newVal)
        },
        get() {
          return this.visible
        }
      }
    }
  }
</script>

<style lang="scss" >
  #dialog {
    .el-dialog__header {
      padding: 0;
      height: 50px;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 100;
    }
    .el-dialog__body{
      padding: 5px;
    }
  }
</style>
